<template>
  <RouterLink to="/about">about</RouterLink><br>
  <RouterLink to="/home">home</RouterLink><br>
  <RouterLink to="/blog">blog</RouterLink>
  <br>
  <RouterView></RouterView>

  <!-- 列表页面 -->
  <div >
    <div>
      <input type="text" placeholder="请输入关键词" v-model="keyword">
      <input type="button" value="搜索" @click="btnFilter">
      <RouterLink to="/editoradd"><input type="button" value="添加"></RouterLink>
    </div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>标题</th>
          <th>作者</th>
          <th>内容</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="blog in filteredBlogs">
          <td>{{ blog.id }}</td>
          <td>{{ blog.title }}</td>
          <td>{{ blog.author }}</td>
          <td>{{ blog.content }}</td>
          <td>
            <RouterLink :to="`/editoradd/${blog.id}`"><input type="button" value="编辑"></RouterLink>            
            <input type="button" value="删除" @click="btnDel(blog.id)">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- <ParentComp></ParentComp> -->
</template>
<!-- 选项式 -->
<!-- <script>
import Blog from '@/components/Blog.vue';
export default {
  components:{
    Blog
  }
}
</script> -->

<!-- 组合式 -->
<script setup>
    import { RouterLink,RouterView } from 'vue-router';
    import {  ref  } from 'vue'
    import { useBlogStore } from './stores/item';
    const initblogs=useBlogStore()
    
    let filteredBlogs=ref(initblogs.blogs)

    let keyword=ref('')

    //过滤
    function btnFilter(){      
      filteredBlogs.value=filteredBlogs.value.filter(blog=>
        String(blog.id).includes(keyword.value) ||
        blog.title.includes(keyword.value) ||
        blog.author.includes(keyword.value) ||
        blog.content.includes(keyword.value)
      )
    }
    // 删除
    function btnDel(id) {
      filteredBlogs.value=filteredBlogs.value.filter(blog => blog.id !== id)
    }

</script>


